<template>
    <el-dialog :visible.sync="open" width="1200px" height="600px" append-to-body>
        <div class="app-container">

            <div id="line-chart" style="height: 600px; width: 1200px;"></div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">关闭</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import { listCount } from "@/api/channel/countUvInfo";
import * as echarts from 'echarts';

export default {
    name: "Count",
    data() {
        return {
            open: false,
            lineChart: null, // 用于存储echarts实例
            queryParams: undefined
        };
    },
    created() {
    },
    methods: {
        show (queryParams){
            this.open = true
            this.queryParams = queryParams
            this.$nextTick(() => {
                this.loadLineChart(queryParams);
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
        },
        // 加载折线图
        loadLineChart(queryParams) {
            // 获取折线图容器
            const chartContainer = document.getElementById('line-chart');
            this.lineChart = echarts.init(chartContainer);

            // 调用接口获取折线图数据
            listCount(queryParams).then(response => {

                console.log(queryParams);
                // 解析接口返回的数据
                const data = response.data.dataList;

                // 配置折线图
                const option = {
                    title: {
                        text: `${queryParams.channelCode}-${queryParams.dateInfo}`,
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['UV数量'],
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.Hour),
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '',
                            type: 'line',
                            data: data.map(item => item.Count),
                        },
                    ],
                };

                // 使用配置渲染折线图
                this.lineChart.setOption(option);
            });
        },
    },
};
</script>
  